<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Document</title>
  <style>
    .custom-cursor {
      display: flex;
      height: 80vh;
      align-items: center;
      justify-content: center;
      background: #f3f3f3;
      padding: 0 10px;
    }

    .card {
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #d29a5a;
      cursor: pointer;
      margin-right: 10px;
      color: #fff;
      font-size: 1.4em;
      text-align: center;
    }

    .card-image-cursor {
      background-color: #d11a5a;
      cursor: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ac1d8cb2b1b46a384e986a7461df26a~tplv-k3u1fbpfcp-watermark.image?"),
        auto;
    }

    .card-emoji-cursor {
      background-color: #d29b22;
      /* 这种方式,不是很好用吗? */
      cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='48' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😀</text></svg>"),
        auto;
    }
  </style>
</head>

<body>
  <div class="custom-cursor">
    <div class="card">Default</div>

    <div class="card card-image-cursor">Image</div>

    <div class="card card-emoji-cursor">Emoji</div>
  </div>
</body>

</html>